<template>
  <div class="pagination-container">
    <el-pagination
      background
      :current-page="currentPage"
      :page-sizes="pageSizeList"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="pageSizeChange"
      @current-change="currentPageChange"
    >
    </el-pagination>
  </div>
</template>
<script>
  import { START_PAGE } from '@/common/zk-constants'

  export default {
    model: {
      prop: 'value',
      event: 'onChange'
    },
    props: {
      total: {
        type: Number,
        default: 0,
      },
      value: {
        type: Object,
        default: () => ({}),
      }
    },
    data() {
      return {
        currentPage: START_PAGE,
        pageSize: 10,
        pageSizeList: [10, 20, 50, 100, 200],
        START_PAGE,
      }
    },
    computed: {
      pagination() {
        return {
          pageSize: this.pageSize,
          currentPage: this.currentPage,
        }
      }
    },
    watch: {
      pagination() {
        this.$emit('onChange', this.pagination)
      },
      'value.currentPage'(page) {
        this.currentPage = page
      }
    },
    methods: {
      pageSizeChange(pageSize) {
        this.pageSize = pageSize
      },
      currentPageChange(page) {
        // 个别后端分页从0开始
        this.currentPage = page
      },
    }
  }
</script>
<style scoped lang="scss">
  /deep/ .el-pagination.is-background li:not(.disabled).active:hover {
    color: white;
  }
</style>
